<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">平台配置</div>
      <div class="ele-page-desc">
        用于前端平台相关信息配置。
      </div>
    </div>
    <div class="ele-body" style="padding-bottom: 71px">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="130px"
        @keyup.enter.native="submit"
        @submit.native.prevent
      >
      

        <el-card shadow="never" header="小程序配置" body-style="padding: 22px 22px 0 22px;">
          <el-row :gutter="15">
            <el-col :lg="8" :md="12">
              <el-form-item label="appid:" prop="appid">
                 <el-input v-model="form.appid" placeholder="请输入小程序appid" clearable/>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12">
               <el-form-item label="appsecret:" prop="appsecret">
                <el-input show-password v-model="form.appsecret" type="password" placeholder="请输入小程序appsecret" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
          
        </el-card>

        <el-card shadow="never" header="客服配置" body-style="padding: 22px 22px 0 22px;">
                    <el-row :gutter="15">
                        <el-col :lg="8" :md="8">
                            <el-form-item label="客服二维码:" prop="kf_img">
                <span slot="label">
                  客服二维码
                  <el-tooltip placement="top">
                    <div slot="content">
                      大小尺寸为100px * 100px
                    </div>
                    <i class="el-icon-question"/>
                  </el-tooltip>
                </span>
                                <!--<ele-image-upload v-model="form.kf_img" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" />-->
                                <div class="ele-image-upload-list">
                                    <div class="ele-image-upload-item ele-image-upload-button"
                                         @click="modalPicTap('dan','kf_img','客服二维码')">
                                        <div>
                                            <div tabindex="0" class="el-upload el-upload--text">
                                                <div class="el-upload-dragger">
                                                    <i class="el-icon-plus ele-image-upload-icon"></i>
                                                </div>

                                                <div class="ele-image-upload-item" style="margin:0 0 0 0;"
                                                     v-if="form.kf_img!=''">
                                                    <div class="el-image">
                                                        <img :src="form.kf_img" width="100%" height="100%"
                                                             class="el-image__inner" style="object-fit: cover;">
                                                    </div>
                                                    <div class="ele-image-upload-close" @click="handleRemove('kf_img')">
                                                        <i class="el-icon-close"></i></div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </el-form-item>

                            <el-form-item label="上班时间:" prop="kf_date">
                                <el-input v-model="form.kf_date" placeholder="请输入上班时间描述" clearable/>
                            </el-form-item>

                        </el-col>
                        <el-col :lg="8" :md="12">
                            <el-form-item label="手机号:" prop="kf_phone">
                                <el-input v-model="form.kf_phone" placeholder="请输入手机号" clearable/>
                            </el-form-item>
                            <el-form-item label="微信号:" prop="kf_wxno">
                                <el-input v-model="form.kf_wxno" placeholder="请输入微信号" clearable/>
                            </el-form-item>
                            <el-form-item label="邮箱:" prop="kf_mailbox">
                                <el-input v-model="form.kf_mailbox" placeholder="请输入" clearable>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="地址:" prop="kf_address">
                                <el-input v-model="form.kf_address" placeholder="请输入地址" clearable/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>

   
        
       
        <uploadPictures
          :isChoice="isChoice"
          :visible.sync="modalPic"
           @getPic="getPic"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          :title="modalTitle"
        ></uploadPictures>

        <!-- 底部工具栏 -->
        <!-- <div class="ele-bottom-tool">
          <div v-if="validMsg" class="ele-text-danger">
            <i class="el-icon-circle-close"></i>
            <span>{{ validMsg }}</span>
          </div>
          <div class="ele-bottom-tool-actions">
            <el-button type="primary" :loading="loading" @click="submit">
              提交
            </el-button>
          </div>
        </div> -->
      </el-form>
    </div>
  </div>
  
</template>

<script>
import uploadPictures from "@/components/uploadPictures";
import { saveSystem ,querySystem } from '@/api/system/config';
  const DEFAULT_FORM = {
    logo: '',
    name:'',
    appid:'',
    appsecret:'',
    balance_name:'',
    brokerage_name:'',
    banner_id:'',
    share_pic:'',
    share_title:'',
    admin_phone:'',
    banner_swich:''
  };
import EleImageUpload from 'ele-admin/es/ele-image-upload';
import request from '@/utils/request';
  export default {
    name: 'FormAdvanced',
    components: { EleImageUpload,uploadPictures },
    data() {
      return {
        modalTitle:'',
        modalPic: false,
        isChoice: "单选",
        gridBtn: {
          xl: 4,
          lg: 8,
          md: 8,
          sm: 8,
          xs: 8,
        },
        gridPic: {
          xl: 6,
          lg: 8,
          md: 12,
          sm: 12,
          xs: 12,
        },
        // 表单提交状态
        loading: false,
        // 表单数据
        form: {
          ...DEFAULT_FORM
        },
        // 表单验证规则
        rules: {
          name: [
            {
              required: true,
              message: '请输入仓库名',
              trigger: 'blur'
            }
          ]
        },
        // 表单验证信息
        validMsg: ''
      };
    },
    mounted() {
      querySystem().then((data) => {
        if(data != null){
          this.form = data;
        }
      }).catch((e) => {
        this.$message.error(e.message);
      });
    },
    methods: {
      // 选择图片
      modalPicTap(tit, picTit,openTitle) {
        this.modalTitle = openTitle;
        this.isChoice = tit === "dan" ? "单选" : "多选";
        this.picTit = picTit;
        this.modalPic = true;
      },
      // 选中图片
      getPic(pc) {
        switch (this.picTit) {
          case "logo":
            this.form.logo = pc.satt_dir;
            break;
          case "qrcode":
            this.form.qrcode = pc.satt_dir;
            break;
          case "share_pic":
            this.form.share_pic = pc.satt_dir;
            break;
        }
        this.modalPic = false;
      },
      //删除图片
      handleRemove(field) {
        this.form[field] = '';
      },
      /* 表单提交 */
      submit() {
        this.$refs['form'].validate((valid, obj) => {
          if (valid) {
            this.validMsg = '';
            this.loading = true;
            const data = {
            ...this.form
            };
            saveSystem(data).then((msg) => {
              this.loading = false;
              this.$message.success(msg);
            }).catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
            return false;
          }
        });
      },
      onUpload(item){
         console.log('item:', item);
          item.status = 'uploading';
          const formData = new FormData();
          formData.append('file', item.file);
          request({
              url: '/common/uploadFile',
              method: 'post',
              data: formData,
              onUploadProgress: (e) => {  // 文件上传进度回调
                  if (e.lengthComputable) {
                      item.progress = e.loaded / e.total * 100;
                  }
              }
          }).then((res) => {
              if(res.data.code === 0) {
                  item.status = 'done';
                  item.url = res.data.data.url;
                  // 如果你上传的不是图片格式, 建议将 url 字段作为缩略图, 再添加其它字段作为最后提交数据
                  //item.url = res.data.data.thumbnail;  // 也可以不赋值 url 字段, 默认会显示为一个文件图标
                  item.fileUrl = res.data.data.url;
              }
          }).catch((e) => {
              item.status = 'exception';
          });
      }
    }
  };
</script>
